<template>
  <div class="login_style">
    <div class="code_show">
      <span class="word" v-html="word"></span>
      <span class="pointer">|</span>
    </div>
    <el-card class="box-card" style="text-align: center">
      <div class="clearfix" slot="header">
        <span style="font-size: 20px">{{wordTitle}}</span>
        <span class="pointer">|</span>
      </div>
      <el-form>
        <el-form-item label="用户名">
          <el-input v-model="model.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="model.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="login" type="primary">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="code_show2"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {},
      str2: '我是爱钻研代码的小徐, 一名简单的前端程序员',
      str: ` <span style="color: green">const</span> el = document.getElementById('word');
        <br /><span style="color: green">const</span> str = '我是爱钻研代码的小徐, 一名简单的前端
        <br />程序员';<br /><br />
        // set Text
        <br /><span style="color: blue">setText</span>(t) {
        <br />
        &#8195;<span style="color: brown">return new </span><span style="color: pink">Promise(</span>(resolve, reject) => {<br />
        &#8195;&#8195;setTimeout(() => {<br />
        &#8195;&#8195;&#8195;el.innerHTML = t;<br />
        &#8195;&#8195;&#8195;resolve();<br />
        &#8195;&#8195;}, 100);<br />
        &#8195;}<span style="color: pink">);</span><br />
        }<br /><br />
        // main start<br />
        <span style="color: brown">async</span> <span style="color: blue">main</span>(flat, str) {<br />
         &#8195;if (!flat) {<br />
         &#8195; &#8195;for (let i = 0; i <= str.length; i++) {<br />
          &#8195; &#8195; &#8195;<span style="color: brown">await</span> setText(str.substr(0, i))<br />
          &#8195;&#8195;}<br />
       &#8195;} else {<br />
         &#8195; &#8195;for (let i = str.length; i > 0; i--) {<br />
           &#8195; &#8195; &#8195;<span style="color: brown">await</span> setText(str.substr(0, i))<br />
         &#8195; &#8195;}<br />
       &#8195;}<br />
       &#8195;setTimeout(() => {<br />
          &#8195;&#8195;main(!flat, str)<br />
       &#8195;}, 1000)；<br />
    }<br /><br />
      <span style="color: blue">main</span>(false, str);
        `,
      word: '',
      wordTitle: '',
      flat: null
    }
  },
  mounted() {
    this.start(this.flat, this.str, 'word', 50)
    this.start(this.flat, this.str2, 'wordTitle', 300)
  },
  methods: {
    async login() {
      // console.log(this.model)
      const res = await this.$http.post('login', this.model)
      // console.log('login', res)
      localStorage.setItem('user_login_token', res.data.user_login_token)
      localStorage.setItem('userinfo', JSON.stringify(res.data.userinfo))
      this.$router.push('/')
      this.$message({
        type: 'success',
        message: '登录成功'
      })
    },
    // 打印特效字
    setText(el, t, wait) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // console.log(t)
          // this.$set({}, this.word, t)
          if (el === 'wordTitle') {
            this.wordTitle = t
          } else {
            this.word = t
          }
          resolve()
        }, wait)
      })
    },
    async start(flat, str, target, wait) {
      // console.log(el)
      if (!flat) {
        for (let i = 0; i <= str.length; i++) {
          await this.setText(target, str.substr(0, i), wait)
        }
      } else {
        for (let i = str.length; i > 0; i--) {
          await this.setText(target, str.substr(0, i), wait)
        }
      }
      setTimeout(() => {
        this.start(!flat, str, target, wait)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.login_style {
  background-color: #f4d03f;
  background-image: linear-gradient(132deg, #f4d03f 2%, #16a085 27%);

  display: flex;
  justify-content: center;
  align-items: center;
}
.code_show {
  min-width: 500px;
  height: 800px;
  // background: cornsilk;
  margin-right: 50px;
  padding: 50px;
}
.code_show2 {
  width: 500px;
  height: 800px;
  margin-left: 50px;
}
.pointer {
  color: black;
  animation: flash 0.2s linear infinite;
}
@keyframes flash {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  min-width: 35rem;
  // margin: 200px auto;
}
</style>
